<template>
    <el-container style="height: 100vh">
        <el-aside width="230px" style="height:100vh;text-align: left;">
            <el-scrollbar style="height:100%;">
                <el-menu ref="menu" style="height: 100%;" :default-openeds="[]" @select="select">
                    <SecondMenu :index="'1-'" :list="menuList"></SecondMenu>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container>

                <el-tabs v-model="editableTabsValue" type="card" @tab-click="byClickTab" closable @tab-remove="removeTab" style="width:100%">
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                            style="height:100%"
                    >

                        <router-view />
                    </el-tab-pane>
                </el-tabs>

        </el-container>
    </el-container>
</template>

<style>
  .el-header {
      background-color: slategrey;
    color: #fff;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
import eventHub from "../../utils/eventHub";
import SecondMenu from "../components/menu/SecondMenu";
import {menuList} from "../router/menu"
  export default {
      components:{
          SecondMenu
      },
    data() {
      return {
          editableTabsValue: '2',
          editableTabs: [
          ],
          tabIndex: 2,
          menuList: menuList
      }
    },
    methods:{
        addTab(targetName) {
            let tabs = this.editableTabs;
            let long = tabs.filter(tab => tab.name == targetName.name).length
            // console.log(long)
            // 如果存在 切换
            if(long == 0){
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                    title: targetName.title,
                    name: targetName.name,
                });
                this.editableTabsValue = targetName.name;
            }else{
                console.log("exist")
                this.editableTabsValue = targetName.name;
            }

        },
        removeTab(targetName) {
            console.log(targetName)
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }

            this.editableTabsValue = activeName;
            console.log(activeName)

            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            if(this.editableTabs.length == 0){
                this.$router.replace('/')
            }else{
                this.$router.replace(activeName)

            }
        },
        byClickTab(item){
            console.log(item.name)
            this.$router.replace(item.name)
        },
        select(index,indexPath){
            // index为对象
            let obj = JSON.parse(index);
            // console.log(obj,indexPath)
            // console.log(this.$refs.menu)
            let collet = this.editableTabs.map(value => {return value.name})
            console.log(collet)
            if(collet.includes(index)){
                this.editableTabsValue = index;
                return ;
            }
            this.addTab({
                title: obj.name,
                name: obj.url,
            })
            this.$router.replace(obj.url)
        },


    },
    mounted() {
        // this.$root.eventHub.$emit('closemenu',page);

        // 用于组件外部打开标签页
        /*
        * 格式为 {
                title: 标题,
                name: 路由,
            }
        * */
        eventHub.$on("change", (val) => {
            console.log(val) // params
            this.addTab(val)
        })

    }
  }
</script>

<style lang="less" scoped>
    /deep/.el-scrollbar__wrap{
        overflow-x: auto;
        .el-scrollbar__view{
            height:100%;
        }


    }
    /deep/.el-tabs__content{
        height: calc(100% - 56px);

    }
    /deep/.el-tabs__header{
        margin:0px;
    }

</style>